<template>
	<view>
		<view class="region_poup" v-show="show">
			<u-transition :show="show" mode="slide-up">
				<view class="zhezhao" @click="quxiao"></view>
				<view class="poup-title border-b">
					<view class="poup-title-left" @click="quxiao">
						<text>取消</text>
					</view>
					<view class="poup-title-center">选择所在地区</view>
					<view class="poup-title-right" @click="confirm">确定</view>
				</view>
				<!-- <view class="selected_title border-b">
			    		当前选的是：{{province_name}}{{city_name}}{{area_name}}
			    	</view> -->
				<view class="region_m">
					<view class="region_m_item border-r">
						<scroll-view scroll-y="true" style="width: 100%; height: 100%">
							<view
								class="region_item"
								@click="select_province(item)"
								:class="{ 'item-acticve': province_id == item.id }"
								v-for="(item, index) in province_list"
								:key="index"
							>
								{{ item.title }}
							</view>
						</scroll-view>
					</view>
					<view class="region_m_item border-r">
						<scroll-view scroll-y="true" style="width: 100%; height: 100%">
							<view class="region_item" @click="select_city(item)" :class="{ 'item-acticve': city_id == item.id }" v-for="(item, index) in city_list" :key="index">
								{{ item.title }}
							</view>
						</scroll-view>
					</view>
					<view class="region_m_item">
						<scroll-view scroll-y="true" style="width: 100%; height: 100%">
							<view class="region_item" @click="select_area(item)" :class="{ 'item-acticve': area_id == item.id }" v-for="(item, index) in area_list" :key="index">
								{{ item.title }}
							</view>
						</scroll-view>
					</view>
				</view>
			</u-transition>
		</view>
		
	</view>
</template>

<script>
import { province, city, area } from '@/common/city_data.js';
export default {
	data() {
		return {
			province_list: [],
			city_list: [],
			area_list: [],
			province_id: '',
			city_id: '',
			area_id: '',
			province_name: '',
			city_name: '',
			area_name: ''
		};
	},
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	mounted() {
		this.init_data();
	},
	methods: {
		confirm() {
			let arr = {
				name: [],
				id: []
			};

			arr.name = [this.province_name, this.city_name, this.area_name];
			arr.id = [this.province_id, this.city_id, this.area_id];
			this.$emit('confirm', arr);
		},
		quxiao() {
			this.$emit('close');
		},
		async init_data() {
			let region_id = await this.get_province_list();
			let region_city_id = await this.get_city_list(region_id);
			await this.get_area_list(region_city_id);
		},
		get_province_list() {
			return new Promise((resolve, reject) => {
				this.province_list = province;
				this.province_id = province[0].id;
				this.province_name = province[0].title;
				resolve(province[0].id);
			});
		},
		get_city_list(region_id) {
			return new Promise((resolve, reject) => {
				let arr = city[region_id] || [];
				for (let i in city) {
					if (i == region_id) {
						arr = city[region_id];
					}
				}
				this.city_list = arr;
				this.city_id = arr[0].id;
				this.city_name = arr[0].title;
				resolve(arr[0].id);
			});
		},
		get_area_list(region_id) {
			let arr = area[region_id] || [];

			this.area_list = arr;
			this.area_id = arr[0].id;
			this.area_name = arr[0].title;
		},
		async select_province(item) {
			this.province_id = item.id;
			this.province_name = item.title;
			this.city_name = '';
			this.area_name = '';
			this.city_id = '';
			this.area_id = '';
			let region_city_id = await this.get_city_list(item.id);
			await this.get_area_list(region_city_id);
		},
		select_city(item) {
			this.city_id = item.id;
			this.city_name = item.title;
			this.area_name = '';
			this.area_id = '';

			this.get_area_list(item.id);
		},
		select_area(item) {
			this.area_id = item.id;
			this.area_name = item.title;
		}
	}
};
</script>

<style lang="less">
.border-b {
	border-bottom: 1px solid #e0e0e0;
}

.item-acticve {
	font-size: 24rpx !important;
	background: #ffffff !important;
	color: #272727 !important;
}

.poup-title {
	display: flex;
	align-items: center;
	height: 100rpx;
	background: #ffffff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
}

.poup-title-left {
	display: flex;
	width: 120rpx;
	justify-content: center;
	font-size: 28rpx;
}

.poup-title-center {
	display: flex;
	flex: 1;
	justify-content: center;
	font-size: 30rpx;
}

.poup-title-right {
	display: flex;
	width: 120rpx;
	align-items: center;
	justify-content: center;
	color: @basecolor;
	font-size: 28rpx;
}

.region_poup {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: fixed;
	z-index: 251;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.4);
}
.zhezhao {
	height: calc(100vh - 500rpx);
	
}

.selected_title {
	display: flex;
	align-items: center;
	height: 90rpx;
	font-size: 24rpx;
	color: #272727;
	padding: 0 30rpx;
	background: #ffffff;
}

.region_m {
	display: flex;
	height: 500rpx;
	background: #f5f5f5;
}

.region_m_item {
	display: flex;
	flex: 1;
	flex-direction: column;
	height: 100%;
}

.region_item {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 70rpx;
	background: #f5f5f5;
	font-size: 24rpx;
	color: #999999;
}

.border-r {
	border-right: 1px solid #e0e0e0;
}
</style>
